<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>课程管理-播放列表</title>
    <th:block th:include="include :: header('播放列表')" />
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <h2>
                        <span class="text-navy">[[${course.userName}]]：[[${course.title}]]</span>
                    </h2>
                    <div class="hr-line-dashed"></div>
                    <div class="row">

                        <div class="col-sm-12 animated">
                            <div class="row">
                                <div class="col-sm-12" id="comment">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $('.file-box').each(function () {
            animationHover(this, 'pulse');
        });
        dynamicData();
    })

    <!--与服务器进行交互-->
    var comment = $('#comment');
    function dynamicData() {
        var course = [[${course}]];
        var upAttList = [[${upAttList}]];
        var html = '';
        upAttList.forEach(function (value, index) {
            var fileSize = 0;
            if(value.attSize){
              var fileSize = toDecimal(value.attSize);
            }
            var s ='';
            if(value.storagePath){
                s = value.storagePath;
            }
            debugger
            html += '<div class="file-box">'
            html += ' <div class="file">';
            html += ' <a href="javascript:void(0)" onclick=openFun("'+course.id+'","'+ s +'")>';
            html += '<span class="corner"></span>';
            html += '<div class="image">';
            html += '<img alt="image" class="img-responsive" src="' + course.image + '">';
            html += '</div>';
            html += '<div class="file-name" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">';
            html += value.attOgfName;
            html += '<br/>';
            html += '<small>' + fileSize + 'MB'+'</small>';
            html += '</div>';
            html += '</a>';
            html += '</div>';
            html += '</div>';
        })
        $("#comment").append(html);
    }
    function openFun(id,storagePath){
        var url = ctx + 'edu/course/play';
        $.modal.openTab('播放课程', url + "?id="+id+"&src="+storagePath);
    }

    function toDecimal(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
            return;
        }
        f = (f/1024).toFixed(2);
        return f;
    }

</script>
</body>

</html>
